<template>
  <div class="blog-list-inner">
    <a-card
      v-for="blog in props.blogs"
      :key="blog.id"
      class="blog-card"
      @click="$emit('blog-click', blog)"
      style="cursor: pointer"
    >
      <div class="blog-header">
        <UserAvatarCard
            :avatar="blog.author.avatar"
            :username="blog.author.name"
            :email="blog.author.email"
            />
        <div class="blog-meta">
          <h3>{{ blog.title }}</h3>
          <p>By {{ blog.author.name }} on {{ blog.date }}</p>
          
        </div>
        <div class="actions">
            <a-button 
            v-if="!isLiked && active"
            type="text"
            size="small"
            style="margin-top: 8px"
            @click="onEditBlog(blog)"
            @click.stop
          >编辑</a-button>
          <a-button
            v-if="active"
            type="text"
            size="small"
            @click="onDelete(blog)"
            @click.stop
          >{{ isLiked ? '取消点赞' : '删除' }}</a-button>
          
        </div>
      </div>
      <div class="actions_blog">
      <div class="blog-preview" v-html="blog.preview" />
      
        </div>
      <div class="blog-stats">
        <span>浏览量：{{ blog.view_count }}</span>
        <span style="margin-left: 16px;">点赞数：{{ blog.likes }}</span>
      </div>
      
    </a-card>
  </div>
</template>

<script setup>
import UserAvatarCard from '@/components/UserAvatarCard.vue'
import { useUserStore } from '@/stores/user'
import { defineProps } from 'vue' // 显式导入（可选，Vue 3.3+ 可省略）
import { useBlogStore } from '@/stores/blog'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'

const userState = useUserStore()
const blogStore = useBlogStore()
const router = useRouter()
const props=defineProps(
    {
    blogs: {
      type: Array,
      default: () => []
    },
    active: {
      type: Boolean,
      default: false
    },
    isLiked: {
      type: Boolean,
      default: false
    }
  }
)
const emit = defineEmits(['delete-blog','blog-click'])
const onEditBlog = (blog) => {
    // 跳转到编辑页面，并且携带上id
    router.push({ path: '/blogs/create', query: { id: blog.id } })
}

const onDelete = async (blog) => {
    try{
        if (props.isLiked) {
            const result = await blogStore.deleteLikeBlog(blog.id)
            if (result.success) {
                emit('delete-blog')
                message.success(result.message)
            }
        }else{
            const result = await blogStore.deleteBlog(blog.id)
            if (result.success) {
                emit('delete-blog')
                message.success(result.message)
            }
        }
    }catch(error) {
        message.error(error)
    }
}

</script>

<style scoped>

.actions {
  /* display: flex; */
  flex-direction: column;
  align-items: flex-end;
  min-width: 60px;
  gap: 8px;
  margin-bottom: 8px;
  margin-left: auto;
}

/* 去除按钮边框和背景，type="text" 已经很简洁了，如需更极简可加如下 */
:deep(.ant-btn-text) {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  color: #1890ff;
  padding: 0 8px;
}
.blog-list-inner {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.blog-list {
  width: 100%;
}
.blog-card {
  margin-bottom: 8px;
}
.blog-header {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
.blog-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.blog-meta h3 {
  margin: 0;
}
.blog-meta p {
  margin: 5px 0 0;
  color: #666;
  font-size: 0.9em;
}
/* .actions_blog{
    display: flex;
} */
.blog-preview {
  color: #444;
  line-height: 1.5;
}
.blog-stats {
  font-size: 12px;
  color: #888;
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}
</style>
